<script setup>
import {onMounted,watch,ref} from 'vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const isCollapse = ref(false)
onMounted(() =>{
    isCollapse.value = localStorage.getItem('isCollapse') == 'true'
})
watch(isCollapse,(newIS) =>{
    isCollapse.value = newIS
})

// 控制菜单伸缩
const toggleMenu = () => {
    isCollapse.value = !isCollapse.value
    localStorage.isCollapse=isCollapse.value
}

</script>


<template>
    <el-menu 
    class="menu"
    :router="true" 
    :collapse="isCollapse"
    popper-effect="light"
    :default-active="route.path"
    :unique-opened="true"
    >
        <el-menu-item index="/main/home">
            <el-icon>
                <House />
            </el-icon>
            <template #title>系统首页</template>
        </el-menu-item>
        <el-sub-menu index="/main/user">
            <template #title>
                <el-icon>
                    <User />
                </el-icon>
                <span>账户管理</span>
            </template>
            <el-menu-item index="/main/user/adminlist">
                <el-icon><Avatar /></el-icon>
                管理员列表
            </el-menu-item>
            <el-menu-item index="/main/user/userlist">
                <el-icon><UserFilled /></el-icon>
                用户列表
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/main/product">
            <template #title>
                <el-icon>
                    <Goods />
                </el-icon>
                <span>产品管理</span>
            </template>
                <el-menu-item index="/main/product/list">
                    <el-icon><List /></el-icon>
                    产品列表
                </el-menu-item>
                <el-menu-item index="/main/product/search">
                    <el-icon><Filter /></el-icon>
                    筛选列表
                </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/main/banner">
            <template #title>
                <el-icon>
                    <Picture />
                </el-icon>
                <span>轮播图管理</span>
            </template>
                <el-menu-item index="/main/banner/bannerhome">
                    <el-icon>
                        <PictureFilled />
                    </el-icon>
                    轮播图列表
                </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/main/editor">
            <template #title>
                <el-icon><Edit /></el-icon>
                <span>富文本编辑器</span>
            </template>
                <el-menu-item index="/main/editor/tinymce">
                    <el-icon><EditPen /></el-icon>
                    TinyMCE
                </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/main/echarts">
            <template #title>
                <el-icon>
                    <PieChart />
                </el-icon>
                <span>可视化数据</span> 
            </template>
            <el-menu-item index="/main/echarts/myecharts">
                <el-icon><HelpFilled /></el-icon>
                <span>Echarts</span>
            </el-menu-item>
        </el-sub-menu>
        <div @click="toggleMenu" class="menu-btn">
            <el-icon v-if="isCollapse">
                <Expand />
            </el-icon>
            <el-icon v-else>
                <Fold />
            </el-icon>
        </div> 
    </el-menu>
    <!-- <Teleport> -->
        
    <!-- </Teleport> -->
</template>

<style scoped lang="scss">
.menu{
    height: 100%;
    position: relative;
}
.menu-btn{
    font-size: 20px;
    color: red;
    position: absolute;
    bottom:30px;
    right:20px;
}
</style>